<template>
	<div class="teaching-graph-page">
		<div class="page-tabs-wrapper">
			<span class="tab-item" :class="{ active: activeTab === 'tree' }" @click="activeTab = 'tree'">
				树图
			</span>
			<span
				class="tab-item"
				:class="{ active: activeTab === 'network' }"
				@click="activeTab = 'network'"
			>
				网图
			</span>
		</div>
		<div class="graph-search-wrapper">
			<el-input
				class="self-radius"
				v-model="searchNodeValue"
				placeholder="输入图谱节点名称搜索"
				:suffix-icon="Search"
				clearable
				@change="onSearchNodeHandle"
			/>
		</div>
		<div class="page-graph-wrapper"></div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';

const activeTab = ref<string>('network');
// 搜索节点
const searchNodeValue = ref('');
const onSearchNodeHandle = () => {
	if (activeTab.value === 'tree' && searchNodeValue.value) {
		// treeGraphRef.value?.highlightNodeByNodeName(searchNodeValue.value);
	}
	if (activeTab.value === 'network' && searchNodeValue.value) {
		// networkGraphRef.value?.highlightNodesByLabelWithRelations(
		//   searchNodeValue.value
		// );
	}
};
</script>
<style scoped lang="scss">
.teaching-graph-page {
	position: relative;
	height: 100%;
	padding: 2rem;
}
.graph-search-wrapper {
	position: absolute;
	right: 2rem;
	top: 2rem;
}
.page-graph-wrapper {
	height: calc(100% - 5rem);
}
</style>
